<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${constants.getSystemName()}</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
    <style>
        .numberInfoSubTitle {
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }

        .numberInfoValue {
            color: rgba(0, 0, 0, .85);
            font-size: 24px;
            margin-top: 10px;
            height: 32px;
            line-height: 32px;
        }

        .numberInfoSuffix {
            color: rgba(0, 0, 0, .65);
            font-size: 16px;
            font-style: normal;
            margin-left: 4px;
            line-height: 32px;
        }
    </style>
</head>

<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

            <div class="layui-col-xs12 layui-col-md4">

                <div class="layui-card">
                    <div class="layui-card-header">项目成员贡献度</div>
                    <div class="layui-card-body" style="height: 300px;overflow: hidden;">
                        <div id="pie" style="width: 100%;height: 260px;"></div>
                    </div>
                </div>

            </div>

            <div class="layui-col-xs12 layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">工时分布</div>
                    <div class="layui-card-body" style="overflow: hidden;">
                        <div id="xse" style="height: 300px;"></div>
                    </div>
                </div>
            </div>

            <div class="layui-col-xs12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">工时明细</div>
                    <div class="layui-card-body" style="">
                        <div style="height: 300px;">
                            <table class="layui-table" id="projectMemberWorkTable" lay-filter="projectMemberWorkTable"></table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">成员小计</div>
                    <div class="layui-card-body" style="">
                        <div style="height: 300px;">
                            <table class="layui-table" id="projectMemberTable" lay-filter="projectMemberTable"></table>
                        </div>
                    </div>
                </div>
            </div>

    </div>

</div>

<!-- js部分 -->
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>

<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>

<script>
    layui.use(['layer', 'element', 'ax','table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var $ax = layui.ax;
        var table = layui.table;
        var element = layui.element;

        /**
         * 管理
         */
        var ProjectMemberWork = {
            tableId: "projectMemberWorkTable"
        };
        var ProjectMember = {
            tableId: "projectMemberTable"
        };

        /**
         * 初始化表格的列
         */
        ProjectMemberWork.initColumn = function () {
            return [[
                {type: 'space'},
                {field: 'id', hide: true, title: ''},
                // {field: 'projectId', sort: true, title: '项目ID'},
                {field: 'name', sort: true, title: '项目成员'},
                {field: 'workDate', sort: true, title: '日期'},
                {field: 'workHour', sort: true, title: '时长'}
            ]];
        };
        ProjectMember.initColumn = function () {
            return [[
                {type: 'space'},
                {field: 'id', hide: true, title: ''},
                {field: 'projectId', sort: true, title: '项目',hide: true,},
                {field: 'userName', sort: true, title: '成员'},
                {field: 'sumWorkHour', sort: true, title: '所用工时（小时）'}
            ]];
        };

        // 渲染表格
        var tableResult = table.render({
            elem: '#' + ProjectMemberWork.tableId,
            url: Feng.ctxPath + '/project/member/work/list?projectId=${projectId}' + '&userId=',
            page: true,
            height: "300",
            cellMinWidth: 100,
            cols: ProjectMemberWork.initColumn()
        });
        var tableResult = table.render({
            elem: '#' + ProjectMember.tableId,
            url: Feng.ctxPath + '/project/member/list?projectId=${projectId}',
            page: true,
            height: "300",
            cellMinWidth: 100,
            cols: ProjectMember.initColumn()
        });

        // 渲染销售额图表
            var pie = '';
            var ajaxPie = new $ax(Feng.ctxPath + "/project/workhour?id=${projectId}", function (data) {
                pie = echarts.init(document.getElementById('pie'), myEchartsTheme);
                var legendData = [];
                var seriesData = [];
                for(var i = 0; i < data.data.length; i++){
                    var obj = {};
                    obj.name = data.data[i].name;
                    obj.value = data.data[i].workHour;
                    legendData.push(data.data[i].name);
                    seriesData.push(obj);
                }
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}小时 ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: legendData
                    },
                    series: [
                        {
                            name: '花费工时',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: seriesData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                pie.setOption(option);
            }, function (data) {
                Feng.error("图表渲染失败!" + data.responseJSON.message + "!");
            });
            ajaxPie.start();

        var myCharts = '';
        var ajax = new $ax(Feng.ctxPath + "/project/workhour/yyyymm?id=${projectId}", function (data) {
            myCharts = echarts.init(document.getElementById('xse'), myEchartsTheme);
            var xData = [];
            var seriesData = [];
            for(var i = 0; i < data.data.length; i++){
                xData.push(data.data[i].yyyyMM);
                seriesData.push(data.data[i].sumWorkHour);
            }
            var option3 = {
                title: {
                    text: '',
                    textStyle: {
                        color: '#000',
                        fontSize: 14
                    }
                },
                tooltip: {},
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: {
                    data: xData
                },
                yAxis: {},
                series: [{
                    type: 'bar',
                    data: seriesData,
                    barMaxWidth: 45
                }]
            };
            myCharts.setOption(option3);
        }, function (data) {
            Feng.error("图表渲染失败!" + data.responseJSON.message + "!");
        });
        ajax.start();

        // 窗口大小改变事件
        window.onresize = function () {
            pie.resize();
            myCharts.resize();
        };

    });
</script>
</body>

</html>